import { 
    of,map,scan,
    // timer,interval,
    // take
} from "rxjs"
import { 
    pairwise,
    // concatMap,
    // switchMap,
    // concatMap
} from 'rxjs/operators'
const TransformOperator = () => {

    of(1,2,3,4).pipe(map(value => value *2)).subscribe(value => console.log(`${value}`))
    
    const amount = [1,2,3,4]
    const source = of(...amount).pipe(
        scan((acc,value) => acc +value,0)
    )

    source.subscribe(amount => console.log(`${amount}`))

    of(1,2,3,4,5,6).pipe(pairwise()).subscribe(data => console.log(`pairwise: ${data}`))

    /* switchMap 示例*/
    // interval(3000).pipe(
    //     switchMap(() => timer(0,1000))
    // ).subscribe(data => console.log(data))
    // 结果：0，1，2 循环

    /* concatMap 示例*/
    // interval(3000).pipe(
    //     concatMap(() => timer(0,1000))
    // ).subscribe(data => console.log(data))

    // 结果：0，1，2，3，4，5...

    /* concatMap 正确用法*/
    // const source1 = interval(3000)
    // const source2 = timer(0,1000).pipe(take(5))
    // source1.pipe(
    //     concatMap(() => source2)
    // ).subscribe(data => console.log(data))

    return (
        <section style={{padding: '20px'}}>
            <h1>转换操作符：</h1>
            <p>map</p>  
            <p>scan</p>   
            <p>pairwise</p>   
            <p>switchMap</p> 
            <p>concatMap</p>
            <p>mergeMap</p>
        </section>
    )
}

export default TransformOperator